<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-row justify-between items-center section_3">
				<text class="text">{{data.content.status_name}}</text>
				<view class="flex-row">
					<view class="flex-col justify-start items-center text-wrapper" @click="data.show=true" v-if="data.content.status==1||data.content.status==2">
						<text class="font_2 text_4">取消订单</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" v-if="data.content.status==1" @click="toPay">
						<text class="font_2">去付款</text>
					</view>
					<view class="flex-col justify-start items-center text-wrapper_2" v-if="data.content.status==3" @click="toAfter">
						<text class="font_2">使用</text>
					</view>
				<!-- 	<view class="flex-col justify-start items-center text-wrapper_2" v-if="data.content.status==4&&data.content.is_comm==0" @click="toEvaluate">
						<text class="font_2">评价</text>
					</view> -->
				</view>
			</view>
			<view class="flex-col relative group_3">
				<view class="flex-col justify-start relative group_4">
					<view class="flex-col section_8 ">
						<view class="flex-row justify-between items-center">
							<view class="flex-row justify-start items-center relative group_5">
								<view class="section_9"></view>
								<text class="font_3 ">服务清单</text>
							</view>
							<text class="text_5">下单介绍</text>
						</view>
						<view class="flex-row justify-between group_6" v-for="(item,index) in data.content.goods_list" :key="index">
							<view class="flex-row items-center space-x-18">
								<image class="image_8" :src="item.cover_path" />
								<view class="flex-col space-y-67">
									<text class="font_3 text_6">{{item.service_name}}</text>
									<view class="flex-row items-baseline space-x-14">
										<view class="group_7">
											<text class="font_6">￥</text>
											<text class="font_4">{{item.price}}</text>
										</view>
										<text class="font_7 text_8" v-if="item.price!=item.market_price">￥{{item.market_price}}</text>
									</view>
								</view>
							</view>
							<text class="self-start font_5 text_7">数量：×{{item.quantity}}</text>
						</view>
						<view class="flex-row justify-between group_8">
							<text class="self-start font_9 text_9">商家地址</text>
							<view class="group_9 font_8">{{data.content.address}}</view>
						</view>
						<view class="flex-row justify-between items-center group_10">
							<text class="font_9">预留手机号</text>
							<view class="flex-row justify-start items-center relative group_11">
								<text class="font_10">{{data.content.mobile}}</text>
								<image class="image_9 " v-if="data.content.status==11" src="/static/phone.png" />
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col justify-start relative group_12">
					<view class="flex-col section_11 space-y-41">
						<view class="flex-row justify-start items-center relative group_13">
							<view class="section_9"></view>
							<text class="font_3">费用信息</text>
						</view>
						<view class="flex-col space-y-40">
							<view class="flex-row justify-between">
								<text class="font_9">服务总额</text>
								<text class="font_10 text_12">￥{{data.content.goods_amounts}}</text>
							</view>
							<view class="flex-row justify-between items-center">
								<text class="font_9">优惠券抵扣额</text>
								<text class="font_10 text_13">-￥{{data.content.coupon_amounts}}</text>
							</view>
							<view class="flex-col group_14 space-y-29">
								<view class="flex-row justify-end items-baseline group_15 space-x-24-reverse">
									<view class="group_17">
										<text class="font_12 text_15">已优惠：</text>
										<text class="font_12 text_16">￥{{data.content.coupon_amounts}}</text>
									</view>
									<view class="group_16">
										<text class="font_1">合计金额：￥</text>
										<text class="font_11 text_14">{{data.content.goods_amounts}}</text>
									</view>
								</view>
								<view class="self-end group_18">
									<text class="font_1">实付金额：</text>
									<text class="font_6">￥</text>
									<text class="font_11 text_17">{{data.content.pay_amounts}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col justify-start relative group_19 ">
					<view class="flex-col section_13 space-y-40 pos_10">
						<view class="flex-row justify-start items-center relative group_20">
							<view class="section_9"></view>
							<text class="font_3">订单信息</text>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_9">订单编号</text>
							<text class="font_10">{{data.content.order_sn}}</text>
						</view>
						<view class="flex-row justify-between items-center">
							<text class="font_9">下单时间</text>
							<text class="font_10">{{data.content.create_time}}</text>
						</view>
						<view class="flex-row justify-between items-center" v-if="data.content.remark != ''">
							<text class="font_9">备注地址</text>
							<text class="font_10">{{data.content.remark}}</text>
						</view>
						<view class="flex-row justify-between items-center" v-if="data.content.status!=1">
							<text class="font_9">支付方式</text>
							<text class="font_10">{{data.content.payment_name}}</text>
						</view>
						<view class="flex-row justify-between items-center" v-if="data.content.status==11">
							<text class="font_9">取消原因</text>
							<text class="font_10">{{data.content.cancel_order_reason}}</text>
						</view>
						<view class="flex-row justify-between items-center" v-if="data.content.status==11">
							<text class="font_9">取消时间</text>
							<text class="font_10">{{data.content.cancel_order_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="data.show" :round="10" :closeable="true" mode="bottom" @close="data.show=false">
			<div class="title">请选择取消订单的理由</div>
			<view class="popup">
				<view class="popup-item" @click="data.cause=index" v-for="(item,index) in data.whyList" :key="index">
					<view class="popup-item-num">{{item}}</view>
					<view class="popup-item-click">
						<image src="/static/click_ac.png" v-if="data.cause==index" mode=""></image>
						<image src="/static/click.png" v-else mode=""></image>
					</view>
				</view>
			</view>
			<view class="btn" @click="toCause">确定</view>
		</u-popup>
		<u-popup :show="data.show1" :round="10" bgColor="transparent" mode="center" @close="data.show1=false">
			<view class="popupV flex-col justify-center items-center">
				<image src="/static/bg5.png" mode=""></image>
				<view class="popupVoucher flex-col items-center justify-center">
					<text>取货凭证</text>
					<text>将二维码展示给店员</text>
					<image src="/static/line.png" class="line" mode=""></image>
					<view class="Infor flex-col">
						<text>核销信息</text>
						<view class="InforItem flex-row justify-between items-center"
							v-for="(item,index) in data.selectList" :key="index">
							<view class="Infor1 flex-row items-center">
								<view class="line1"></view>
								<text :class="item.status==0?'active':''">{{item.use_sn}}</text>
								<image src="/static/Kopie.png" v-if="item.status==0" mode="" @click.stop="toCopy(item.use_sn)"></image>
							</view>
							<text class="active" v-if="item.status==0">待使用</text>
							<text v-else>已使用</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	onLoad((option) => {
		data.value.order_id = option.order_id
		data.value.index = option.index
		getDate()
		uni.$on('detail', function(data) {
			console.log(data);
			getDate()
		})
	})
	let data = ref({
		order_id: '',
		index: '',
		content: {
			worker: '',
			shop_list: []
		},
		whyList: ['123', '23', '12345'],
		cause: 0,
		selectList:[],
		show: false,
		show1: false,
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderDetail, {
			member_id: uni.getStorageSync('member_id') | '',
			order_id: data.value.order_id,
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
		}).then(res => {
			if (res.flag == "success") {
				data.value.content = res.data
				console.log(data.value.content);
			}
		})
		proxy.$req.requestGET(proxy.$api.SystemInfo.cancelReason).then(res => {
			if (res.flag == "success") {
				data.value.whyList = res.data.reasons
			}
		})
	}
	const toCause = () => {
		data.value.show = false
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: function(res) {
				if (res.confirm) {
					proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.cancelOrder, {
						member_id: uni.getStorageSync('member_id') | '',
						reason: data.value.whyList[data.value.cause],
						order_id: data.value.order_id
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						if (res.flag == "success") {
							uni.$emit('detail', {
								index: data.value.index,
								type: '取消'
							})
							setTimeout(() => {
								getDate()
							}, 1000)
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	const toAfter = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.useList, {
			member_id: uni.getStorageSync('member_id') | '',
			order_id: data.value.order_id
		}).then(res => {
			if (res.flag == "success") {
				data.value.selectList = res.data.list
				data.value.show1 = true
			} else {
				uni.showToast({
					title: res.message,
					icon: 'error'
				})
			}
		})
	}
	const toPay = () => {
		let obj = {
			order_id: data.value.content.order_id,
			order_sn:data.value.content.order_sn,
			pay_amounts:data.value.content.pay_amounts
		}
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/payment/payment?parm=' + JSON.stringify(obj)
			})
		}, 1000)
		// proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.doPay, {
		// 	order_id: data.value.order_id,
		// 	payment: 'wepay'
		// }).then(res1 => {
		// 	if (res1.flag == "success") {
		// 		let parm = res1.data
		// 		wx.requestPayment({
		// 			timeStamp: parm.timestamp,
		// 			nonceStr: parm.noncestr,
		// 			package: parm.package,
		// 			signType: parm.signType,
		// 			paySign: parm.sign,
		// 			success(res2) {
		// 				console.log(res2);
		// 				uni.showToast({
		// 					title: "支付成功",
		// 					icon: 'success'
		// 				})
		// 				setTimeout(() => {
		// 					getDate()
		// 				}, 1000)
		// 			},
		// 			fail(res2) {
		// 				console.log(res2);
		// 				uni.showToast({
		// 					title: "支付失败",
		// 					icon: 'error'
		// 				})
		// 				setTimeout(() => {
		// 					getDate()
		// 				}, 1000)
		// 			}
		// 		})

		// 	} else {
		// 		uni.showToast({
		// 			title: res1.message,
		// 			icon: "none"
		// 		})
		// 	}
		// }).catch(err => {
		// 	console.log(err);
		// })
	}
	const toLoat = () => {
		uni.openLocation({
			latitude: data.value.content.lat * 1,
			longitude: data.value.content.lng * 1,
			complete: function(res) {
				console.log('complete', res);
			}
		});
	}
	const toPhone = (type) => {
		uni.makePhoneCall({
			phoneNumber: type == 1 ? data.value.content.shop_mobile : data.value.content.courier_phone //仅为示例
		});
	}
	const toEvaluate = () => {
		uni.navigateTo({
			url: '/pages/evaluate/evaluate?order_id=' + data.value.order_id + '&shop_id=' + data.value.content
				.shop_id
		})
	}

	const toRefund = () => {
		uni.navigateTo({
			url: '/pages/applyFor/applyFor?order_id=' + data.value.order_id
		})
	}
	const toSchedule = () => {
		uni.navigateTo({
			url: '/pages/speed/speed?order_refund_id=' + v.order_refund_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			overflow-y: auto;

			.section_3 {
				padding: 26rpx 30rpx 246rpx;
				background-image: linear-gradient(0deg, #f8f8f8 0%, #eff5f0 100%);

				.text {
					color: #333333;
					font-size: 36rpx;
					font-family: PingFangSC;
					line-height: 35rpx;
				}

				.group_2 {
					width: 216rpx;
				}

				.text-wrapper {
					padding: 16rpx 0;
					border-radius: 16rpx;
					width: 160rpx;
					margin-right: 20rpx;
					border: solid 2rpx #eaeaea;

					.text_4 {
						color: #666666;
					}
				}

				.text-wrapper_2 {
					padding: 18rpx 0;
					background-color: #54bc6e;
					background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
					border-radius: 16rpx;
					width: 160rpx;
				}

				.font_2 {
					font-size: 26rpx;
					font-family: PingFangSC;
					line-height: 25rpx;
					color: #ffffff;
				}
			}

			.group_3 {
				margin-top: -219rpx;
				padding: 0 30rpx;
				height: 1327rpx;

				.group_4 {
					

					.section_8 {
						padding: 35rpx 18rpx 31rpx 30rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.group_5 {
							padding: 4rpx 0;
							width: 130rpx;

							.pos_6 {
								position: absolute;
								left: 0;
								right: 0;
								top: 0;
								bottom: 0;
							}
						}

						.text_5 {
							margin-right: 10rpx;
							color: #1ebdff;
							font-size: 26rpx;
							font-family: PingFangHeiTC;
							line-height: 26rpx;
						}

						.group_6 {
							margin-top: 41rpx;

							.space-x-18 {

								&>view:not(:first-child),
								&>text:not(:first-child),
								&>image:not(:first-child) {
									margin-left: 18rpx;
								}

								.space-y-67 {

									&>view:not(:first-child),
									&>text:not(:first-child),
									&>image:not(:first-child) {
										margin-top: 67rpx;
									}

									.text_6 {
										margin-left: 6rpx;
									}

									.space-x-14 {

										&>view:not(:first-child),
										&>text:not(:first-child),
										&>image:not(:first-child) {
											margin-left: 14rpx;
										}
									}
								}
							}

							.text_7 {
								margin-right: 10rpx;
								margin-top: 117rpx;
							}
						}

						.group_8 {
							margin-top: 36rpx;

							.text_9 {
								margin-top: 6rpx;
							}

							.group_9 {
								width: 80%;
								margin-right: 5rpx;
								// height: 88rpx;
								font-size: 28rpx;
								font-family: PingFangHeiTC;
								line-height: 44rpx;
								color: #333333;
								text-align: right;
							}
						}

						.group_10 {
							margin-top: 20rpx;

							.group_11 {
								// padding: 14rpx 0;

								.image_9 {
									width: 50rpx;
									height: 50rpx;
								}

								.pos_7 {
									position: absolute;
									right: 10rpx;
									bottom: 0;
								}
							}
						}
					}

					.pos_5 {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}

					.image_8 {
						border-radius: 20rpx;
						width: 160rpx;
						height: 160rpx;
					}

					.group_7 {
						line-height: 25rpx;
						height: 26rpx;

						.font_4 {
							font-size: 32rpx;
							font-family: PingFangSC;
							line-height: 25rpx;
							color: #ff3333;
						}
					}

					.font_7 {
						font-size: 22rpx;
						font-family: PingFangHeiTC;
						line-height: 17rpx;
						color: #9c9b9a;
					}

					.text_8 {
						text-decoration: line-through;
					}

					.font_5 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
						color: #999999;
					}
				}

				.group_12 {
					// margin-top: -56rpx;
					padding-top: 20rpx;

					.section_12 {
						background-color: #ffffff;
						border-radius: 20rpx;
						height: 337rpx;
					}

					.section_11 {
						padding: 35rpx 23rpx 30rpx 30rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.group_13 {
							padding: 4rpx 0;

							.pos_9 {
								position: absolute;
								left: 3rpx;
								bottom: 0;
							}
						}
					}

					.pos_8 {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}
				}

				.section_9 {
					background-color: #1ebdff;
					background-image: linear-gradient(0deg, #1ebdff 0%, #6ed5ff 100%);
					border-radius: 4rpx;
					width: 8rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				.font_3 {
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 31rpx;
					color: #333333;
				}

				.font_9 {
					font-size: 28rpx;
					font-family: PingFangSC;
					line-height: 27rpx;
					color: #333333;
				}

				.font_10 {
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 21rpx;
					color: #333333;
				}

				.font_6 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #ff3333;
				}

				.group_19 {
					margin-top: 24rpx;

					.section_14 {
						padding: 229rpx 16rpx 44rpx 30rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.view_3 {
							margin-right: 11rpx;
						}
					}

					.pos_14 {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}

					.font_13 {
						font-size: 28rpx;
						font-family: PingFangHeiTC;
						line-height: 27rpx;
						color: #333333;
					}

					.pos_15 {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}

					.section_13 {
						padding: 36rpx 16rpx 36rpx 30rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.group_20 {
							padding-top: 4rpx;

							.pos_11 {
								position: absolute;
								left: 0;
								bottom: 0;
							}
						}

						
					}

					.pos_10 {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}
				}

				.view_2 {
					margin-top: 6rpx;
				}

				.space-y-41 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 41rpx;
					}
				}

				.space-y-40 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 40rpx;
					}

					.text_12 {
						line-height: 23rpx;
					}

					.text_13 {
						margin-right: 10rpx;
						color: #ff3333;
					}

					.group_14 {
						padding-top: 31rpx;
						border-top: solid 2rpx #f8f8f8;

						.group_15 {
							padding: 0 4rpx;

							.group_17 {
								line-height: 23rpx;
								height: 23rpx;

								.font_12 {
									font-size: 24rpx;
									font-family: PingFangHeiTC;
								}

								.text_15 {
									color: #333333;
									line-height: 23rpx;
								}

								.text_16 {
									color: #ff3333;
									line-height: 20rpx;
								}
							}

							.group_16 {
								line-height: 31rpx;
								height: 33rpx;

								.text_14 {
									color: #333333;
								}
							}
						}

						.space-x-24-reverse {

							&>view:not(:last-child),
							&>text:not(:last-child),
							&>image:not(:last-child) {
								margin-right: 24rpx;
							}
						}

						.group_18 {
							margin-right: 4rpx;
							line-height: 31rpx;

							.text_17 {
								color: #ff3333;
							}
						}

						.font_11 {
							font-size: 40rpx;
							font-family: PingFangSC;
							line-height: 31rpx;
						}
					}

					.space-y-29 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 29rpx;
						}
					}
				}
			}

			.font_1 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 23rpx;
				color: #333333;
			}
		}
		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 19rpx;
		}
		
		.popup {
			width: 750rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin: 10rpx 0;
		}
		
		.popup-item {
			width: 90%;
			height: 105rpx;
			border-bottom: 2rpx solid #F6F6F6;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.popup-item:nth-last-child(1) {
			border-bottom: 0;
		}
		
		.popup-item-num {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		
		.popup-item-click {
			width: 32rpx;
			height: 32rpx;
			/* border: 2rpx solid #B5B5B5; */
			border-radius: 17rpx;
		
			>image {
				width: 33rpx;
				height: 33rpx;
			}
		}
		
		.active {
			border: 0;
		}
		
		.btn {
			width: 630rpx;
			height: 104rpx;
			background-color: #54BC6E;
			border-radius: 24rpx;
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.popupV {
			width: 620rpx;
			height: 730rpx;
			position: relative;
		
			>image {
				width: 100%;
				height: 100%;
			}
		}
		
		.popupVoucher {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		
			>text {
				&:nth-child(1) {
					margin-top: 50rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
		
				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 20rpx;
					margin-bottom: 33rpx;
				}
			}
		
			>image {
		
				&:nth-child(3) {
					width: 90%;
					height: 2rpx;
					margin-bottom: 33rpx;
				}
			}
		
			.Infor {
				margin-top: 20rpx;
				width: 80%;
				min-height: 410rpx;
				margin-bottom: 53rpx;
		
				>text {
					font-size: 32rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #333333;
					line-height: 32rpx;
					margin-bottom: 35rpx;
				}
		
				.InforItem {
					margin-bottom: 28rpx;
					text {
						font-size: 28rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #666666;
					}
		
					.active {
						color: #333333;
					}
		
					.Infor1 {
						.line1 {
							width: 6rpx;
							height: 6rpx;
							background: #111;
							border-radius: 50%;
							margin-right: 18rpx;
						}
		
						>image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
</style>